<template>
	<view class="indexContainer">
		<!--头部logo,搜索,用户名 -->
		<view class="header">
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
			<view class="search">
				<view class="iconfont icon-sousuo"></view>
				<input class="searchInput" placeholder="搜索商品" placeholder-class="placeholder" type="text" value="" />
			</view>
			<button class="username" type="default">用户名</button>
		</view>
		<!-- 导航栏目 -->
		<scroll-view class="navScroll" scroll-x v-if="indexData.kingKongModule">
			<view class="navItem" :class="navIndex === -1 ? 'active' : ''" @click="changeNavInde(-1) ">推荐</view>
			<view
				class="navItem"
				:class="navIndex === index ? 'active' : ''"
				@click="changeNavInde(index)"
				v-for="(kingKong, index) in indexData.kingKongModule.kingKongList"
				:key="kingKong.L1Id"
			>
				{{ kingKong.text }}
			</view>
		</scroll-view>
		<scroll-view class="contentScroll" scroll-y>
			<Recommend v-if='navIndex===-1' />
			<CateList  :navIndex="navIndex" v-else/>
		</scroll-view>
	</view>
</template>

<script>
	import { mapState , mapActions} from 'vuex';
	// import myAxios from '../../utils/myAxios.js'
	import Recommend from'../../components/Recommend/Recommend.vue'
	import CateList from '../../components/CateList/CateList.vue'
export default {
	name: 'index',
	data() {
		return {
			navIndex: -1
		};
	},
	components:{
		Recommend,CateList
	}
	,
	methods:{
		changeNavInde(index){
			this.navIndex=index
					},
		...mapActions('home',{
			getIndexData:'getIndexData'
		})
	},
	
	async	mounted () {
	// 	uni.request({
	// 		url: '/api/getIndexData',
	// 		success: res => {
	// 			console.log(res);
	// 			this.indexData = res.data;
	// 		}
	// 	});
		// const res=	await myAxios('/getIndexData')
		// this.indexData = res;
		this.getIndexData()
		
	},
	computed:{
		// 如果进行了modules划分
		// ...mapState({
		// 	initData1:(state)=>state.home.initData1
		// })
		//  如果进行了modules划分,同时开启了命名空间的使用
		...mapState('home',['indexData'])
	}
	
};
</script>

<style lang="stylus">
.indexContainer
	.header
		padding-top 20upx
		display flex
		align-items center
		.logo
			width 118upx
			height 40upx
			margin 0 20upx
			flex-shrink 0
		.search
			position relative
			background-color #ccc
			flex-grow 1
			border-radius 10upx
			height 60upx
			padding-left 60upx
			.searchInput
				height 100%
				.placeholder
					text-align center
					font-size 24upx
					text-indent -60upx
			.iconfont
				position absolute
				left 20upx
				top 50%
				transform translateY(-50%)
		.username
			width 140upx
			height 60upx
			font-size 20upx
			line-height 60upx
			color red
			margin 0 20upx
			flex-shrink 0
	.navScroll
		// display flex
		white-space nowrap
		.navItem
			display inline-block
			width 140upx
			height 80upx
			text-align center
			line-height 80upx
			font-size 26upx
			&.active
				border-bottom 4upx solid red
	.contentScroll{
			// 实现方式一：
		/* #ifdef MP*/
			// 小程序:height=屏幕100%高度-header高度-nav高度
			height calc( 100vh - 80upx - 84upx)
		/* #endif */
		/* #ifdef H5 */
			// h5:height=屏幕100%高度-header高度-nav高度-导航栏高度-tabBar高度
			height calc( 100vh - 80upx - 84upx - 88upx - 100upx)
		/* #endif */
		
		// 实现方式二：级联变量
		// height calc(100vh - 80upx - 84upx   - var(--window-top) - var(--window-bottom))
	}
</style>
